<template>
	<view class="base-form-warpper">
		<u-form :model="formConfig.model" ref="uForm" :label-width="200">
			<u-form-item v-for="(item,index) in formConfig.props" :key="index" :label="item.label">
				<view v-if="_$t(item, 'normal-input')">
					<u-input v-model="formConfig.model[item.prop]" v-if="!formConfig.disabled" :type="item.inputType" :border="item.border"
					 :height="item.height" :auto-height="item.autoHeight" />
					<view v-else>
						{{formConfig.model[item.prop]}}
					</view>
				</view>
				<view v-if="_$t(item, 'select-input')">
					<view @click="changeSelectShow(item)" class="select-label" v-show="isPlaceHolder(item)">{{getLabel(item)}}</view>
					<view @click="changeSelectShow(item)" v-show="!isPlaceHolder(item)">{{getLabel(item)}}</view>
				</view>
				<view v-if="_$t(item, 'calendar-input')">
					<view @click="changeCalendarShow(item)" class="select-label" v-show="isPlaceHolder(item)">{{getLabel(item)}}</view>
					<view @click="changeCalendarShow(item)" v-show="!isPlaceHolder(item)">{{getLabel(item)}}</view>
				</view>
				<u-upload v-if="_$t(item, 'upload-input')" :disabled="formConfig.disabled" :action="action" :file-list="fileList"
				 :header="uploadHeader" :before-upload="beforeUpload"></u-upload>
			</u-form-item>
		</u-form>
		<u-select v-model="showSel" :list="selectList" @confirm="selectChange"></u-select>
		<u-calendar v-model="showCalendar" :mode="calendarMode" @change="calendarChange"></u-calendar>
		<u-modal v-model="showModal" @confirm="confirmModal" ref="uModal" title="审核" :show-cancel-button="true">
			<view class="">
				<u-radio-group v-model="approvalVal" @change="radioGroupChange">
					<u-radio @change="radioChange" v-for="(item, index) in approvalOperateList" :key="index" :name="item.name"
					 :disabled="item.disabled">
						{{item.name}}
					</u-radio>
				</u-radio-group>
				<view class="" v-show="approvalVal == '不通过'">
					<view class="">
						审核意见
					</view>
					<view class="">
						<input type="textarea" :value="approvalContent" :border="true" :height="300" :auto-height="true" />
					</view>
				</view>
			</view>
		</u-modal>
		<view class="visible"></view>
		<view class="button-foot">
			<u-button type="primary" @click="submit" v-if="formConfig.type=='apply'">提交1</u-button>
			<u-button type="primary" @click="approval" v-if="formConfig.type=='approval'">审核</u-button>
		</view>

	</view>
</template>

<script>
	import baseUrl from '@/libs/config.js';
	import dictMixins from '@/libs/dictMixins.js';
	export default {
		props: {
			formConfig: {
				type: Object
			}
		},
		mixins: [dictMixins],
		data() {
			return {
				// 公共
				showItem: '',
				// select组件相关
				showSel: false,
				selectList: [],
				// 日期组件相关
				showCalendar: false,
				calendarMode: 'date',
				// 上传组件相关
				uploadHeader: {},
				action: `${baseUrl}/stu/common/uploadFile`,
				fileList: [],
				// 审核操作相关
				showModal: false,
				approvalVal: '',
				approvalOperateList: [{
						name: '通过',
						value: 1,
					},
					{
						name: '不通过',
						value: 2
					}
				],
				approvalContent: ''
			}
		},
		created() {
			let Authorization = uni.getStorageSync('Authorization');
			this.uploadHeader = {
				Authorization: 'Wechat ' + Authorization
			};
		},
		mounted() {

		},
		methods: {
			_$t(item, type) {
				return item.type == type;
			},
			isPlaceHolder(item) {
				let haveVal = this.formConfig.model[item.prop] ? true : false;
				return !haveVal
			},
			getLabel(item) {
				let sel = this.formConfig.model[item.prop];
				let label = sel ? sel.label : '请选择';
				return label;
			},
			changeSelectShow(item) {
				if (this.formConfig.disabled) return;
				this.showItem = item;
				let findOneDictList = this.findOneDictList(item.dictCode);
				this.selectList = findOneDictList.map(item => {
					let obj = {
						label: item.name,
						value: item.value
					}
					return obj;
				});
				this.showSel = true;
			},
			selectChange(obj) {
				let sel = obj[0];
				this.formConfig.model[this.showItem.prop] = sel;
				this.showSel = false;
			},
			changeCalendarShow(item) {
				if (this.formConfig.disabled) return;
				this.showItem = item;
				this.calendarMode = item.calendarMode;
				this.showCalendar = true;
			},
			calendarChange(obj) {
				let sel = {
					label: obj.result,
					value: obj.result
				}
				this.formConfig.model[this.showItem.prop] = sel;
				this.showCalendar = false;
			},
			beforeUpload(index, list) {
				const tempFilePaths = list.map(item => {
					return item.file.path
				});
				return new Promise((resolve, reject) => {
					tempFilePaths.map((filePath, index) => {
						uni.uploadFile({
							url: this.action,
							filePath: filePath,
							name: 'file',
							header: this.uploadHeader,
							success: res => {
								let data = JSON.parse(res.data);
								if (data.code == 0) {
									let fileItem = data.result;
									list[index].fileItem = data.result;
									this.fileList = list;
								}
							},
							fail(e) {
								reject();
							}
						});
					})
				})
			},
			//提交
			submit() {
				let model = this.formConfig.model;
				model.fileList = this.fileList;
				this.$emit('submit', this.formConfig.model);
			},
			// 审核
			approval() {
				this.showModal = true;
			},
			radioGroupChange() {

			},
			radioChange() {

			},
			confirmModal() {

			}
		},
		computed: {
			haveFooter() {
				let show = !this.formConfig.hiddenFooter;
				return show;
			}
		},
		components: {

		}
	}
</script>



<style lang="scss" scoped>
	$sys_color: #0081ff;
	$font_color: #5F636F;

	.base-form-warpper {
		height: 100%;
		position: relative;

		input {
			cursor: auto;
			display: block;
			text-overflow: clip;
			overflow: hidden;
			white-space: nowrap;
			font-family: UICTFontTextStyleBody;
			height: 100%;
		}

		.select-label {
			color: $u-light-color;
		}

		.visible {
			height: 88rpx;
			line-height: 88rpx;
			width: 100%;
			background-color: #000;
		}

		.button-foot {
			background-color: #fff;
			position: fixed;
			z-index: 999;
			left: 0;
			right: 0;
			bottom: 0;
			padding: 20rpx 30rpx;
		}
	}
</style>
